<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>${apiAlias}管理</title>
  <div th:replace="common/base"></div>
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">

    <div style="margin: 0px 10px">
      <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item" style="margin: 0px">
          <div class="layui-inline">
            <label class="layui-form-label">关键字</label>
            <div class="layui-input-inline">
              <input type="text" name="keyword" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-inline">
            <button id="btnSearch" type="submit" class="layui-btn layui-btn-primary" lay-submit
                    lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索
            </button>
          </div>
        </div>
      </form>
    </div>

    <script type="text/html" id="toolbar${className}">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm data-add-btn" lay-event="add"><i
                  class="layui-icon">&#xe654;</i>添加
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"><i
                  class="layui-icon">&#xe640;</i>删除
        </button>
      </div>
    </script>

    <table id="${changeClassName}Table" lay-filter="${changeClassName}Table"></table>

    <script type="text/html" id="currentTableBar">
      <a class="layui-btn layui-btn-primary layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs data-count-delete" lay-event="delete">删除</a>
    </script>
  </div>
</div>
<!-- 表单弹窗 -->
<script type="text/html" id="${changeClassName}Dialog">
  <div id="${changeClassName}Frm" class="layui-form model-form" action="" lay-filter="${changeClassName}Frm">
    <input type="hidden" name="id"/>
    <input type="hidden" name="isDeleted" value="0">
  <#if columns??>
    <#list columns as column>
      <#if column.formShow?? && column.formShow>
    <div class="layui-form-item">
      <label class="layui-form-label"><#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if></label>
      <div class="layui-input-block">
        <#if column.formType = 'Input'>
        <input type="text" name="${column.changeColumnName}" <#if column.istNotNull> lay-verify="required" </#if> autocomplete="off" placeholder="请输入"
               class="layui-input">
        <#elseif column.formType = 'Textarea'>
        <textarea type="text" name="${column.changeColumnName}" <#if column.istNotNull> lay-verify="required" </#if> placeholder="请输入"
               class="layui-textarea"></textarea>
        <#elseif column.formType = 'Radio'>
        <input type="checkbox" name="${column.changeColumnName}" <#if column.istNotNull> lay-verify="required" </#if>
               lay-skin="switch" lay-text="否|是" value="true" />
        <#else>
        <input type="text" name="${column.changeColumnName}" <#if column.istNotNull> lay-verify="required" </#if> placeholder="yyyy-MM-dd"
               class="layui-input">
        </#if>
      </div>
    </div>
      </#if>
    </#list>
  </#if>
    <div class="layui-form-item text-right">
      <button class="layui-btn" lay-filter="${changeClassName}Submit" lay-submit>保存</button>
      <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
    </div>
  </div>
</script>
<div th:replace="common/baseJS"></div>
<script th:inline="none">
  layui.use(['form', 'table', 'ab'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            ab = layui.ab;

    table.render({
      elem: '#${changeClassName}Table',
      url: '/${apiPath}/${changeClassName}/findPage',
      toolbar: '#toolbar${className}',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {type: "checkbox", width: 50},
  <#if columns??>
    <#list columns as column>
      <#if column.columnShow?? && column.columnShow>
        <#if column.columnType != 'Timestamp'>
        {field: '${column.changeColumnName}', title: "<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>"},
        <#else>
        {
          field: '${column.changeColumnName}', title: "<#if column.remark != ''>${column.remark}<#else>${column.changeColumnName}</#if>", templet: function (d) {
            if (d.${column.changeColumnName} != null) {
              return ab.dateUtil.format(d.${column.changeColumnName}, "yyyy-MM-dd hh:mm:ss");
            }
            return '';
          }
        },
        </#if>
      </#if>
    </#list>
  </#if>
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      response: {
        statusName: 'status', //规定数据状态的字段名称，默认：code
        statusCode: 200, //规定成功的状态码，默认：0
        msgName: 'hint', //规定状态信息的字段名称，默认：msg
        countName: 'total', //规定数据总数的字段名称，默认：count
        dataName: 'rows' //规定数据列表的字段名称，默认：data
      },
      limits: [10, 15, 20, 25, 50, 100],
      limit: 15,
      page: true,
      skin: 'line'
    });

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      //执行搜索重载
      table.reload('${changeClassName}Table', {
        page: {curr: 1},
        where: data.field
      }, 'data');

      return false;
    });
    //自定义验证规则
    form.verify({
      // name: function (value) {
      //   if (value.length < 2) {
      //     return '模块名称至少得2个字符啊';
      //   }
      // }
    });

    /* 表格头工具栏点击事件 */
    table.on('toolbar(${changeClassName}Table)', function (obj) {
      if (obj.event === 'add') {  // 监听添加操作
        showEditModel();
      } else if (obj.event === 'delete') {  // 监听删除操作
        var checkStatus = table.checkStatus('${changeClassName}Table')
                , data = checkStatus.data;
        if (data.length == 0) {
          ab.window.msg("请至少选择一条数据！", "error");
          return;
        }
        var ids = [];
        for (var i = 0; i < data.length; i++) {
          ids.push(data[i].id);
        }
        ab.util.deleteForm({
          url: "/${apiPath}/${changeClassName}",// 请求地址
          type: "delete",// 请求提交方式
          data: JSON.stringify(ids),// 发送回去的数据 JSON.stringify(data)
          success: function (data) {
            $("#btnSearch").click();
          }
        });
      }
    });

    /* 表格操作列点击事件 */
    table.on('tool(${changeClassName}Table)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        showEditModel(data);
      } else if (obj.event === 'delete') {
        ab.util.deleteForm({
          url: "/${apiPath}/${changeClassName}",// 请求地址
          type: "delete",// 请求提交方式
          data: JSON.stringify([data.id]),// 发送回去的数据 JSON.stringify(data)
          success: function (data) {
            $("#btnSearch").click();
          }
        });
      }
    });

    //监听表格复选框选择
    table.on('checkbox(${changeClassName}Table)', function (obj) {
      // console.log(obj)
    });

    /* 显示表单弹窗 */
    function showEditModel(mData) {
      ab.window.open({
        id: "add${className}",
        title: (mData ? '修改' : '添加') + '${apiAlias}',
        content: $("#${changeClassName}Dialog").html(),//"/${apiPath}/${changeClassName}/form",
        area: "500px",
        success: function (layero, dIndex) {
          // 回显表单数据
          form.val('${changeClassName}Frm', mData);
          //监听提交
          form.on('submit(${changeClassName}Submit)', function (data) {
            ab.util.submitForm({
              url: "/${apiPath}/${changeClassName}",// 请求地址
              type: !mData ? "post" : "put",// 请求提交方式
              data: JSON.stringify(data.field),// 发送回去的数据 JSON.stringify(data)
              success: function (data) {
                layer.close(dIndex);
                $("#btnSearch").click();
              }
            });
            return true;
          });

          // 禁止弹窗出现滚动条
          $(layero).children('.layui-layer-content').css('overflow', 'visible');
        }
      });
    }
  });
</script>

</body>
</html>